<template>
	<!-- 节目列表 -->
	<div class="programList">
		<!-- 节目导航栏 -->
		<div class="program">
			<div class="p-title">节目（53）</div>
			<div class="order" @click="changeList">
				<van-icon name="sort" />
				<span>切换顺序</span>
			</div>
		</div>
		<!-- 列表区域 -->
		<div class="ListWrapper" ref="divref">
			<van-row class="List" v-for="item in ProgramList" :key="item.id">
				<van-col span="2"
					><van-icon name="play-circle-o" size="26" color="#999" />
				</van-col>
				<van-col span="20" class="secondL"
					><span class="L-content">{{ item.trackInfo.title }}</span></van-col
				>
				<van-col span="2">
					<van-icon name="down" />
				</van-col>
			</van-row>
		</div>

		<!-- 加载更多 -->
		<div class="more" @click="LoadMore">
			加载更多
			<van-icon name="arrow-down" class="micon" />
		</div>
	</div>
</template>

<script setup lang="ts">
	import type { ProgramModel } from "@/api/CourseDetail";
	import { ref } from "vue";
	import router from "@/router";
	let props = defineProps<{
		ProgramList: ProgramModel[];
	}>();

	// 切换顺序
	let changeList = () => {
		props.ProgramList.reverse();
	};
	let divref = ref();
	// 加载更多
	let LoadMore = (e: any) => {
		let token = localStorage.getItem("TOKEN");
		if (!token) {
			router.push("/login");
		} else {
			divref.value.style.height = "auto";
			e.currentTarget.style.display = "none";
		}
	};
</script>

<style scoped lang="less">
	// 节目列表
	.programList {
		margin-top: 5px;
		// 节目导航区
		.program {
			display: flex;
			height: 26px;
			justify-content: space-between;
			padding: 0 15px;
			align-items: center;
			.p-title {
				font-size: 18px;
				font-weight: bold;
			}
			.order {
				font-size: 14px;
				color: #999;
			}
		}
		// 列表区域

		.ListWrapper {
			height: 200px;
			overflow: hidden;
			.List {
				display: flex;
				align-items: center;
				padding: 12px;
				.secondL {
					padding: 0 15px;
					.L-content {
						font-size: 16px;
						color: #333;
					}
				}
			}
		}

		// 查看更多
		.more {
			font-size: 16px;
			padding: 16px 0px;
			text-align: center;
			font-weight: bold;
			color: #f86442;
			.micon {
				margin-left: -5px;
			}
		}
	}
</style>
